import cakes from "./styles/cakes.module.css"
import TopNavict from "../compoments/TopNavict"
import BottomBavict from "../compoments/bottomnav"
import { useNavigate } from "react-router-dom"

const cake_lis = [
    {name:"全部"},
    {name:"慕斯蛋糕"},
    {name:"巧克力蛋糕"},
    {name:'乳酪蛋糕'},
    {name:"奶油蛋糕"}
]

const fake_list = [
    {
        name:"赤名莉香（春日版）/Matcha Melon Cream Cake",
        url:'https://jimucake.com/pic/thumb/img/upload@_@2024@_@03@_@20@_@20240320110648890.jpg/w/200/h/200',
        info:'/恩施抹茶的醇厚，回甘悠长/\n/新鲜蜜瓜温润饱满，多汁甜/\n/奶油细腻，柔软抹茶胚绝配/\n/春天在此刻，拉响心动讯号/\n',
        price:'￥229.00元/ 1磅',
        id:'111'
    },
    {
        name:"赤名莉香（春日版）/Matcha Melon Cream Cake",
        url:'https://jimucake.com/pic/thumb/img/upload@_@2024@_@03@_@20@_@20240320110648890.jpg/w/200/h/200',
        info:'/恩施抹茶的醇厚，回甘悠长/\n/新鲜蜜瓜温润饱满，多汁甜/\n/奶油细腻，柔软抹茶胚绝配/\n/春天在此刻，拉响心动讯号/\n',
        price:'￥229.00元/ 1磅',
        id:'222'
    }
]

const Cakes = () =>{
    const navigate = useNavigate()
    const getCake = (name) =>{
        console.log(name);
    }
    const Cakeinfo = (id) => {
        navigate("/cakeInfo")
    }
    const cartadd = (id) => {
        console.log(id)
    }
    return (
        <div className={cakes.app}>
            <div className={cakes.nav}>
                <TopNavict/>
                <hr />
            </div>
            <div className={cakes.Cakes}>
                <div className={cakes.menu}>
                    {
                        cake_lis.map((item,index)=>(
                            <div key={index} className={cakes.menu_item} onClick={()=>getCake(item.name)}>
                                {index === cake_lis.length - 1 ? <div className={cakes.menu_name}>{item.name}</div> : <div className={cakes.menu_name}>{item.name} <span className={cakes.menu_span}>/</span></div>}
                            </div>
                        ))
                    }
                </div>
                <div className={cakes.list}>
                    {
                        fake_list.map((item,index)=>(
                            <div key={index} className={cakes.cake_item}>
                                <div className={cakes.cake_img}>
                                    <img src={item.url} alt="" />
                                </div>
                                <div className={cakes.cake_info}>
                                    <div className={cakes.cake_info_left}>
                                        <div className={cakes.cake_info_head} onClick={()=>Cakeinfo(item.id)}>
                                            {item.name}
                                        </div>
                                        <div className={cakes.cake_info_desc}>
                                            <pre className={cakes.cake_info_pre}>
                                                {item.info}
                                            </pre>
                                        </div>
                                    </div>
                                    <div className={cakes.cake_info_right}>
                                        {item.price}
                                    </div>
                                </div>
                                <div className={cakes.cake_option}>
                                    <div><img onClick={()=>Cakeinfo(item.id)} src="https://jimucake.com/views/default/skin/default/images/images/view_details.png" alt="" /></div>
                                    <div><img onClick={() => cartadd(item.id)} src="https://jimucake.com/views/default/skin/default/images/images/join_cart.png" alt="" /></div>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
            <BottomBavict/>
        </div>
    )
}

export default Cakes